<template>
	<view class="page-container">
		<up-navbar safeAreaInsetTop fixed placeholder @leftClick="pageBack"></up-navbar>
		<view class="ptb-24 plr-32">
			<view class="pb-fixed-bottom">
				<view class="fs-40 font-bold">{{ detailInfo.title }}</view>
				<view class="flex-a mtb-16">
					<image :src="detailInfo.author_avatar" class="user-avatar" />
					<text class="c-grey-86 ml-8">{{ detailInfo.author_name }}</text>
				</view>
				<view class="locations">
					<view v-for="(item, index) in detailInfo.resorts" :key="index" class="location-item">
						<image :src="imgBaseUrl + 'note-loc.png'" class="icon-32" />
						<text class="ml-8 mr-2">{{ item.name }}</text>
						<image :src="imgBaseUrl + 'icon-right.png'" class="icon-16" />
					</view>
				</view>
				<view class="fs-28 mt-24 lh-44 c-grey-4e">
					<up-parse :content="detailInfo.content" />
				</view>
				<view class="mt-24 c-grey-86">{{ getShortDate(detailInfo.create_time) }} 发布</view>
			</view>
		</view>
		<bottom-menu :detail="detailInfo" />
	</view>
</template>
<script setup lang="ts">
import { $getArticleDetail } from "@/api/feed/note"
import { getShortDate } from "@/utils/tools"
import { onLoad, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app"
import bottomMenu from "./components/bottom-menu.vue"
import { pageBack } from "@/utils/page-redirect"

const imgBaseUrl = inject("imgBaseUrl")
const detailInfo = ref<any>({})
const getDetail = (id: string) => {
	$getArticleDetail(id).then((res) => {
		detailInfo.value = res
	})
}
onShareAppMessage(() => {
	return {}
})
onShareTimeline(() => {
	return {}
})
onLoad((options) => {
	getDetail(options?.id)
})
</script>
<style lang="scss" scoped>
.user-avatar {
	width: 40rpx;
	height: 40rpx;
}
.locations {
	display: flex;
	flex-wrap: wrap;
	.location-item {
		height: 36rpx;
		background: $grey;
		border-radius: 64rpx;
		padding: 0 12rpx 0 2rpx;
		display: flex;
		align-items: center;
		& + .location-item {
			margin-left: 8rpx;
		}
	}
}
.bottom-fixed-wrap {
	box-shadow: 0 4rpx 16rpx 0 rgba(0, 0, 0, 0.1);
}
</style>
